<template>
	<view>
		<view>
			<view class="publicTitle">
				<image :src="baseUrl + 'icon/fiery_heat.png'" style="width: 50rpx;height: 50rpx;"></image>
				<view style="margin-left: 10rpx;">热门通告</view>
			</view>
			<view class="flexwc" style="padding: 0 30rpx;">
				<view class="commLabel" v-for="(item,index) in hotLabels" :key="index" @click="goOrder(item.LabelID)">
					{{item.LabelName}}
				</view>
			</view>
		</view>
		<view>
			<view class="publicTitle">选择分类</view>
			<view class="flexwc" style="padding: 0 30rpx;">
				<view class="classCommLabel" v-for="(item,index) in noticeLabels" :key="index"
					@click="openPopup(index)">
					<image :src="item.Labelicon" style="width: 75rpx;height: 75rpx;"></image>
					<view style="margin-left: 30rpx;">
						{{item.LabelName}}
					</view>

				</view>
			</view>
		</view>
		<!-- <uni-popup ref="popup" type="bottom" background-color="#FFF"> -->

		<fui-bottom-popup :show="isPopupShow" @close="isPopupShow = false">
			<view class="subLabels">
				<view class="popupTitle">{{ popupTitle }}</view>
				<view class="" style="display: flex;flex-direction: row;flex-wrap: wrap;">
					<view class="subLabel" v-for="(item,index) in subLabelList" :key="index"
						@click="goOrder(item.LabelID)">
						{{item.LabelName}}
					</view>
				</view>
				<view class="" style="height: 50rpx;"></view>
			</view>
		</fui-bottom-popup>

		<!-- </uni-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotLabels: [],
				noticeLabels: [],
				popupTitle: '请选择',
				subLabelList: [],
				isPopupShow: false,
				baseUrl: ''

			};
		},
		onLoad(options) {
			this.baseUrl = this.$baseUrl;
			this.getLabels();
		},
		methods: {
			getLabels() {
				this.$httpost('/Labels/List', {
					'typeid': 3
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.hotLabels = res.data.hotLabel
						this.noticeLabels = res.data.LabelList;
						// console.log('this.noticeLabels', this.noticeLabels)

					}
				})
			},
			openPopup(index) {
				// console.log(index)

				this.popupTitle = this.noticeLabels[index].LabelName
				this.subLabelList = this.noticeLabels[index].SubLabels

				// console.log(this.popupTitle, this.subLabelList)

				// this.$refs.popup.open('bottom')
				this.isPopupShow = true;
			},
			goOrder(noticeID) {
				uni.navigateTo({
					url: '/releasePages/pages/noticeOrder?noid=' + noticeID
				})
			},
			goTab(url) {
				// console.log(url)
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.publicTitle {
		padding: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	.classCommLabel {
		width: calc((100% - 40rpx) / 2);
		height: 80rpx;
		margin-right: 30rpx;
		margin-top: 25rpx;
		background-color: #FFF;
		border: 1rpx solid #FFF;
		border-radius: 10rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
		box-shadow: 0rpx 0rpx 5rpx 0rpx #e3e3e3;

		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;

		&:nth-child(2n) {
			margin-right: 0;
		}

		&:nth-child(1) {
			margin-top: 0;
		}

		&:nth-child(2) {
			margin-top: 0;
		}
	}

	.commLabel {
		width: calc((100% - 75rpx) / 3);
		height: 50rpx;
		margin-right: 30rpx;
		margin-top: 25rpx;
		background-color: #FFF;
		border: 1rpx solid #FFF;
		border-radius: 10rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 50rpx;
		box-shadow: 0rpx 0rpx 5rpx 0rpx #e3e3e3;

		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;

		&:nth-child(3n) {
			margin-right: 0;
		}

		&:nth-child(1) {
			margin-top: 0;
		}

		&:nth-child(2) {
			margin-top: 0;
		}

		&:nth-child(3) {
			margin-top: 0;
		}
	}

	.subLabels {
		width: 100vw;
		background-color: #FFF;
		min-height: 400rpx;

	}

	.popupTitle {
		font-weight: bold;
		text-align: center;
		padding: 30rpx;
	}

	.subLabel {
		// float:left;
		width: calc((100vw - 140rpx) / 2);
		height: 40rpx;
		padding: 10rpx;
		// margin:30rpx;
		margin: 0 30rpx;
		margin-top: 30rpx;
		background-color: #FFF;
		border: 1rpx solid #e0e0e0;
		border-radius: 10rpx;
		font-size: 30rpx;
		text-align: center;
	}

	.subLabel:nth-child(2n) {
		margin-left: 0;
	}
</style>